<template>
  <div class="main">
    <div class="card">
      <header>
        <img src=".././assets/header.jpg">
        <div class="txt">
          <p>滨海中关村园区诚邀片区服务加盟</p>
          <span>尊敬的客户业主，您好！</span>
          <div></div>
          <p class="msg"> 首先感谢您接受我们的邀请。
            我们是泰达产发集团北塘建发公司园区运营服务团队，
            为了更好的服务园区、发展园区，邀请您加入我们，真诚感谢您的配合！ </p>
        </div>
      </header>
      <div class="form">
        <el-form :model="form"
                 :rules="rules"
                 ref="form1"
                 label-width="30%"
                 class="demo-ruleForm">
          <!-- 表单开始 -->
          <el-form-item label="企业名称"
                        prop="qiyename">
            <el-input style="width:90%"
                      placeholder="请输入企业名称"
                      v-model="form.qiyename"></el-input>
          </el-form-item>
          <el-form-item label="行业类别"
                        prop="leibie">
            <el-select v-model="form.leibie"
                       style="width:90%"
                       @change="handleLeibieChange"
                       placeholder="请选择行业类别">
              <el-option v-for="item in leibieList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="qita1"
                        label="其他"
                        prop="qita">
            <el-input style="width:90%"
                      placeholder="请输入"
                      v-model="form.qita1"></el-input>
          </el-form-item>
          <el-form-item label="营业执照"
                        prop="zhizhao">
            <el-upload ref="upload"
                       :file-list="form.fileList"
                       action="http://www.ytszh.com/zhongguancun/api/Values/TestPostFile"
                       :on-remove="handleRemove"
                       :on-success="handleSuccess">
              <el-button size="small"
                         type="primary">点击上传
              </el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="经营范围"
                        prop="scope">
            <el-select v-model="form.scope"
                       style="width:90%"
                       multiple
                       @change="handleScopeChange"
                       placeholder="请选择经营范围">
              <el-option v-for="item in scopeList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="qita2"
                        label="其他"
                        prop="qita">
            <el-input style="width:90%"
                      placeholder="请输入"
                      v-model="form.qita2"></el-input>
          </el-form-item>
          <el-form-item label="机构代码"
                        prop="jigou">
            <el-input style="width:90%"
                      placeholder="请输入机构代码"
                      v-model="form.jigou"></el-input>
          </el-form-item>
          <el-form-item label="行业优势"
                        prop="youshi">
            <el-input style="width:90%"
                      type="textarea"
                      :rows="4"
                      placeholder="请输入行业优势"
                      v-model="form.youshi">
            </el-input>
          </el-form-item>
          <el-form-item label="成功案例"
                        prop="anli">
            <el-input style="width:90%"
                      type="textarea"
                      :rows="4"
                      placeholder="请输入成功案例"
                      v-model="form.anli">
            </el-input>
          </el-form-item>

          <!-- <el-form-item label="法人"
                        prop="faren">
            <el-input style="width:90%"
                      placeholder="请输入法人"
                      v-model="form.faren"></el-input>
          </el-form-item> -->
          <el-form-item label="联系人"
                        prop="linkname">
            <el-input style="width:90%"
                      placeholder="请输入联系人"
                      v-model="form.linkname"></el-input>
          </el-form-item>
          <el-form-item label="联系方式"
                        prop="phone">
            <el-input style="width:90%"
                      placeholder="请输入联系电话"
                      v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="专业特长"
                        prop="techang">
            <el-select v-model="form.techang"
                       style="width:90%"
                       multiple
                       @change="handleTechangChange"
                       placeholder="请选择专业特长">
              <el-option v-for="item in techangList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="qita3"
                        label="其他"
                        prop="qita">
            <el-input style="width:90%"
                      placeholder="请输入"
                      v-model="form.qita3"></el-input>
          </el-form-item>
          <!-- end -->
        </el-form>
        <!-- 提交 -->
        <div class="sub">
          <el-button @click="submit"
                     style="width:50%"
                     :loading="loading"
                     type="primary">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addObj2, uploadimg } from '@/api/faq1'

export default {
  data() {
    return {
      form: {
        peopleNumber: 0,
        scope: [],
        imgList: [],
        imgList2: [],
        qita1: '',
        qita2: '',
        qita3: ''
      },
      labelPosition: 'top',
      formid: [],
      loading: false,
      qita1: false,
      qita2: false,
      qita3: false,
      techangList: [
        { label: '广告', value: '广告' },
        { label: '人力资源', value: '人力资源' },
        { label: '税务服务', value: '税务服务' },
        { label: '知识产权', value: '知识产权' },
        { label: '工程', value: '工程' },
        { label: '装修建材', value: '装修建材' },
        { label: '法律服务', value: '法律服务' },
        { label: '会计服务', value: '会计服务' },
        { label: '文体运营服务', value: '文体运营服务' },
        { label: '超市', value: '超市' },
        { label: '餐饮', value: '餐饮' },
        { label: '物业管理', value: '物业管理' },
        { label: '消防维护', value: '消防维护' },
        { label: '软件服务', value: '软件服务' },
        { label: '电脑硬件', value: '电脑硬件' },
        { label: '科技服务', value: '科技服务' },
        { label: '金融类', value: '金融类' },
        { label: '电信运营商', value: '电信运营商' },
        { label: '公共能源(水电气热)', value: '公共能源(水电气热)' },
        { label: '办公用品', value: '办公用品' },
        { label: '其他', value: '其他' }
      ],
      scopeList: [
        { label: '汽车研发', value: '汽车研发' },
        { label: '电子设备', value: '电子设备' },
        { label: '发动机', value: '发动机' },
        { label: '变速器', value: '变速器' },
        { label: '车身&底盘', value: '车身&底盘' },
        { label: '汽车制动集管路系统', value: '汽车制动集管路系统' },
        { label: '汽车电子', value: '汽车电子' },
        { label: '消费电子', value: '消费电子' },
        { label: '集成电路', value: '集成电路' },
        { label: '工业互联网', value: '工业互联网' },
        { label: '石化', value: '石化' },
        { label: '新材料', value: '新材料' },
        { label: '新能源', value: '新能源' },
        { label: '医药', value: '医药' },
        { label: '医疗器械', value: '医疗器械' },
        { label: '医药研发及外包服务', value: '医药研发及外包服务' },
        { label: '食品饮料', value: '食品饮料' },
        { label: '大健康', value: '大健康' },
        { label: '创新金融', value: '创新金融' },
        { label: '平台经济', value: '平台经济' },
        { label: '旅游业', value: '旅游业' },
        { label: '商贸物流', value: '商贸物流' },
        { label: '数字创艺', value: '数字创艺' },
        { label: '其他', value: '其他' }
      ],
      leibieList: [
        { label: '汽车及装备制造', value: '汽车及装备制造' },
        { label: '电子信息', value: '电子信息' },
        { label: '石化与新材料', value: '石化与新材料' },
        { label: '医药大健康', value: '医药大健康' },
        { label: '现代服务业', value: '现代服务业' },
        { label: '其他', value: '其他' }
      ],
      rules: {
        qiyename: [{ required: true, message: '请输入', trigger: 'blur' }],
        leibie: [{ required: true, message: '请输入', trigger: 'blur' }],
        faren: [{ required: true, message: '请输入', trigger: 'blur' }],
        linkname: [{ required: true, message: '请输入', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入', trigger: 'blur' }],
        jigou: [{ required: true, message: '请输入', trigger: 'blur' }],
        scope: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleChangeTime(data) {
      console.log('data===', data)
    },
    handleChangeBianli(data) {
      console.log('data===', data)
    },
    // 删除
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.form.fileList = fileList // 移除文件后赋值
      this.formid = fileList.map(v => {
        return v.response[0].ID
      })
    },
    // 上传成功的回调
    handleSuccess(response, file, fileList) {
      console.log('上传文件回调===', fileList)
      this.formid = fileList.map(v => {
        return v.response[0].ID
      })
    },
    handleLeibieChange(data) {
      console.log('data===', data)
      if (data == '其他') {
        this.qita1 = true
      } else {
        this.qita1 = false
        this.form.qita1 = ''
      }
    },
    handleScopeChange(data) {
      console.log('data===', data)
      if (data.indexOf('其他') != -1) {
        this.qita2 = true
      } else {
        this.qita2 = false
        this.form.qita2 = ''
      }
    },
    handleTechangChange(data) {
      console.log('data===', data)
      if (data.indexOf('其他') != -1) {
        this.qita3 = true
      } else {
        this.qita3 = false
        this.form.qita3 = ''
      }
    },

    submit() {
      console.log('提交===', this.form)
      this.$refs.form1.validate(valid => {
        if (valid) {
          console.log('通过校验===')
          let sub = this.form
          let subData = {
            ID: '',
            Enterprise_name: sub.qiyename,
            Industry_category: sub.leibie,
            legal_person: sub.faren,
            contacts: sub.linkname,
            contact_number: sub.phone,
            Organization_code: sub.jigou,
            formid: this.formid,
            Nature_Business: sub.scope.join(','),
            advantage: sub.youshi,
            Successful_cases: sub.anli,
            Main_business: sub.techang.join(','),
            Industry_category_Other: sub.qita1 || '',
            Nature_Business_Other: sub.qita2 || '',
            Main_business_Other: sub.qita3 || '',
            createuser: 'admin',
            updateuser: 'admin',
            createdate: '',
            updatedate: ''
          }
          console.log('subData===', subData)
          this.loading = true
          addObj2(subData)
            .then(res => {
              console.log('res===', res)
              setTimeout(() => {
                this.loading = false
              }, 1000)
              this.$router.push({ path: '/success', query: { type: 'faq2' } })
            })
            .catch(err => {
              setTimeout(() => {
                this.loading = false
                this.$notify.error({
                  title: '错误',
                  message: '提交失败',
                  duration: 2000
                })
              }, 1000)
            })
        } else {
          console.log('error submit!!')
          setTimeout(() => {
            this.loading = false
          }, 1000)
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.main {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
  /* border: 1px solid #0f0; */
}
header img {
  display: block;
  width: 100%;
}
.txt {
  padding: 10px;
}
.txt p {
  font-size: 18px;
  line-height: 28px;
  margin: 0;
  /* text-indent: 10px; */
}
.txt span {
  font-size: 14px;
}
.txt .msg {
  font-size: 14px;
  line-height: 28px;
  text-indent: 10px;
}
.sub {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 30px 0;
  /* margin: 0 auto; */
}
</style>